<!DOCTYPE html>

<html lang="en">
  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas study</title>
</head>

<body>

  <h1>Canvas绘图</h1>

  <input onchange="selectMusic(event)" type="file">
  <audio id="audio" controls ></audio>

  <canvas id="canvas" onclick="startAnime()" width="600" height="800" style="border: 1px solid #000;"></canvas>

  JavaScript代码
  123123
  TypeScript
  
  <!-- 绘图依赖 -->
  <script src="./index.js"></script>
  <!-- 交互流程 -->
  <script>

    let mycanvas = new MyCanvas({
      canvasDom: document.getElementById('canvas'),
      width:600,
      height:800
    })
    mycanvas.update()

    function selectMusic(event){
      console.log('selectMusic')
      let file = event.target.files[0]
      console.log(file.name)
      let audioDom = document.getElementById('audio')
      audioDom.src = URL.createObjectURL(file)

      mycanvas.conectFile(audioDom)
    }


    function startAnime(){
      mycanvas.startAnime()
    }

  </script>

</body>


</html>